<template>
  <div>
    <p>详情页面</p>
    <!-- 1、这是第一种获取路由上面的动态参数 -->
    <p>{{ $route.params.id }}</p>
    <!-- 2、通过props的方式获取 -->
    <p>{{ id }}</p>
    <!-- 如果从/detail/1到/detail/2，原来的组件实例会被复用。因为两个路由都渲染
         同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命
         周期钩子不会再被调用
     -->
    <!-- 复用组件时，想对路由参数变化做出响应的话，可以简单地watch $route 对象 -->
    <!-- 或者使用 beforeRouteUpdate 导航守卫 -->
    <!-- 捕获所有的路由或404 Not found 路由 -->
    <!-- 常规参数只会匹配被 / 分隔的URL片段中的字符。如果想匹配任意路径，我们可以
         可以使用通配符(*)。当使用通配路由时，请确保路由顺序是正确的，也就是说含有
         通配符的路由应该放在最后面。
         当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数
         。包含了URL通过通配符被匹配的部分
     -->
    <!-- 匹配优先级：谁先定义，谁的优先级最高 -->
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: {
    id: Number,
  },
  watch: {
    $route(to, from) {
      console.log(to);
      console.log(from);
    },
  },
};
</script>

<style></style>
